<template>
  <div class="elTree">
    <el-input
      v-if="treeConfig.inputShow"
      placeholder="搜索"
      prefix-icon="el-icon-search"
      v-model="treeInput"
      @change="treeChange"
    >
    </el-input>
    <el-tree
      ref="tree"
      :data="treeConfig.data"
      :props="treeConfig.defaultProps"
      :node-key="treeConfig.nodeKey"
      highlight-current
      :filter-node-method="filterNode"
      @node-click="handleNodeClick"
    >
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>
          <i v-if="node.isLeaf" class="el-icon-document"></i>
          <i v-else class="el-icon-folder-opened"></i>
          {{ data.label }}
        </span>
        <el-dropdown v-if="treeConfig.moreList.length > 0">
          <span class="el-dropdown-link">
            <i class="el-icon-more"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <template v-for="i in treeConfig.moreList">
              <template v-if="node.isLeaf">
                <el-dropdown-item
                  :key="i.emit"
                  v-show="i.condition"
                  @click.native="$emit(i.emit, data)"
                  >{{ i.name }}
                </el-dropdown-item>
              </template>
              <template v-else>
                <el-dropdown-item
                  :key="i.emit"
                  @click.native="$emit(i.emit, data)"
                  >{{ i.name }}
                </el-dropdown-item>
              </template>
            </template>
          </el-dropdown-menu>
        </el-dropdown>
      </span>
    </el-tree>
  </div>
</template>

<script>
export default {
  name: "Dialog",
  props: {
    treeConfig: {
      type: Object,
      default: () => {
        return {
          defaultProps: {
            children: "children",
            label: "label",
          },
          inputShow: false,
          nodeKey: "id",
          moreList: [],
          data: [],
        };
      },
    },
  },
  data() {
    return {
      treeInput: "",
    };
  },
  methods: {
    aaa(v, a) {
      console.log(v, a);
    },
    handleNodeClick(node, data) {
      console.log(node, data);
      this.$emit("handleNodeClick", node);
    },
    treeChange(val) {
      console.log(val, 74);
      this.$refs.tree.filter(val);
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
  },
};
</script>

<style scoped lang="scss">
.elTree::v-deep {
  height: 100%;
  display: flex;
  flex-direction: column;
  .el-tree {
    background: transparent;
    margin-top: 0.1rem;
    height: 100%;
    overflow-y: auto;
    .el-tree-node {
      font-size: 0.14rem;
      color: #b6c2d7;
      .el-tree-node__content {
        .custom-tree-node {
          width: 100%;
          display: flex;
          justify-content: space-between;
          padding-right: 0.1rem;
        }
        &:hover {
          background: rgba(0, 0, 0, 0.14);
        }
      }
    }
    .el-tree-node:focus > .el-tree-node__content {
      background: rgba(0, 0, 0, 0.14);
    }
  }
  .el-tree--highlight-current
    .el-tree-node.is-current
    > .el-tree-node__content {
    background: rgba(0, 0, 0, 0.14);
  }
  .el-tree-node__content {
    height: 0.35rem;
  }
}
.el-dropdown-menu ::v-deep {
  background-color: #1E202D;
  border: 1px solid rgba(255,255,255,.14);
  .el-dropdown-menu__item{
    color: #999999;
  }
}
</style>
